<template>
	<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback"
		:up="upOption" @up="upCallback">

		<view class="container">

			<view class="search-box">

				<view style="width: 90%;">
					<u-search placeholder="请输入学生姓名" v-model="keyword" searchIconColor="#DFDBDB" :show-action="false"
						bg-color="#fff" placeholder-color="#DFDBDB" @change="search"></u-search>
				</view>

			</view>

			<view class="top">
				<view class="calendar">
					<image src="../../../static/images/calendar.png"></image>
				</view>
				<view class="date" @click="dateShow=true">{{startDate?startDate:'请选择日期'}}</view>
				<view class="mid">至</view>
				<view class="date" @click="dateShow=true">{{endDate?endDate:'请选择日期'}}</view>

			</view>

			<view class="tabs">

				<u-dropdown active-color="#64AEFF">
					<u-dropdown-item v-model="value1" :title="book_title" :options="options1"
						@change="change1"></u-dropdown-item>
					<u-dropdown-item v-model="type" :title="type_title" :options="options2"
						@change="change2"></u-dropdown-item>
					<u-dropdown-item v-model="status" :title="status_title" :options="options3"
						@change="change3"></u-dropdown-item>
				</u-dropdown>

			</view>

			<view class="lists">
				<view class="item" v-for="(item,index) in list.data" @click="toResult(item)">
					<view class="info">
						<view class="left">
							<view class="label1">
								<text class="col-98">词汇本：</text>{{item.book_name}}({{item.start_num}}-{{item.end_num}})
							</view>
							<view class="label">
								<text class="col-98">学生名称：</text>{{item.name}}
							</view class="label">
							<view class="label">
								<text class="col-98">抽查个数：</text>{{item.choose_num}}
							</view>

						</view>

						<view class="right">
							<view class="status" v-if="item.status==1">
								{{item.status_text}}
							</view>
							<view class="status-fail" v-if="item.status==2">
								{{item.status_text}}
							</view>

						</view>
					</view>
					<view class="dis-flex" style="justify-content: space-between;">
						<view class="label"><text class="col-98">抽查形式：</text>{{item.type_text}}</view>
						<view class="label" style="padding-right: 20rpx;"><text
								class="col-98">抽查时间：</text>{{item.create_time}}
						</view>
					</view>

				</view>

			</view>


			<u-calendar v-model="dateShow" :mode="mode" @change="changeDate"></u-calendar>

		</view>
	</mescroll-body>
</template>

<script>
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import * as PaperApi from '@/api/ant/paper'
	import * as BookApi from '@/api/ant/book'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'

	const pageSize = 15
	const showViewKey = 'GoodsList-ShowView';

	export default {
		components: {
			MescrollBody
		},
		mixins: [MescrollMixin],
		data() {
			return {
				keyword: '',
				bookId: 0,
				type: 0,
				id: 0,
				duration: 10,
				content: '请填写听到的英文',
				book_title: '词汇本',
				type_title: '抽查形式',
				status_title: '考试通过情况',
				percent: 100,
				num: 1,
				status: 0,
				startDate: '',
				endDate: '',
				mode: 'range',
				dateShow: false,
				list: getEmptyPaginateObj(), // 商品列表数据
				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于4条才显示无更多数据
					noMoreSize: 4,
				},
				options1: [],
				options2: [

					{
						label: '中翻英',
						value: 1,
					},
					{
						label: '英翻中',
						value: 2,
					},
					{
						label: '听英写英',
						value: 3,
					},
					{
						label: '听英写中',
						value: 4,
					},
					{
						label: '听英写中英',
						value: 5,
					},
				],
				options3: [

					{
						label: '已通过',
						value: 1,
					},
					{
						label: '未通过',
						value: 2,
					},
				],
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getBookList()

		},

		methods: {
			toResult(item) {
				uni.navigateTo({
					url: '/pages/ant/teacher/result?paperId=' + item.paper_id
				})
			},

			getBookList(pageNo = 1) {
				const app = this
				return new Promise((resolve, reject) => {
					BookApi.list({
							page: pageNo
						})
						.then(result => {
							// 合并新数据
							const newList = result.data.list
							app.bookList = result.data.list
							var options1 = []

							result.data.list.forEach(item => {
								var book = {}
								book.value = item.book_id
								book.label = item.name
								options1.push(book)

							})
							this.options1 = options1

						})
				})
			},
			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
				const app = this
				// 设置列表数据
				app.getGoodsList(page.num)
					.then(list => {
						const curPageLen = list.data.length
						const totalSize = list.data.total
						app.mescroll.endBySize(curPageLen, totalSize)
					})
					.catch(() => app.mescroll.endErr())
			},
			/**
			 * 获取商品列表
			 * @param {number} pageNo 页码
			 */
			getGoodsList(pageNo = 1) {
				const app = this
				console.log(app.options)
				const param = {
					type: app.type,
					bookId: app.bookId,
					status: app.status,
					keyword: app.keyword,
					startDate: app.startDate,
					endDate: app.endDate,
					page: pageNo
				}
				return new Promise((resolve, reject) => {
					PaperApi.list(param)
						.then(result => {
							// 合并新数据
							const newList = result.data.list
							app.list.data = getMoreListData(newList, app.list, pageNo)
							resolve(newList)
						})
						.catch(reject)
				})
			},
			search(e) {
				this.keyword = e
				this.getGoodsList(1)
			},

			changeDate(e) {
				console.log(e);
				this.startDate = e.startDate
				this.endDate = e.endDate

				this.getGoodsList(1)
			},
			change1(e) {
				console.log(e)
				this.bookId = e

				this.options1.forEach(item => {
					if (item.value == e) {
						this.book_title = item.label
					}
				})
				this.getGoodsList(1)

			},
			change2(e) {
				console.log(e)
				this.type = e

				this.options2.forEach(item => {
					if (item.value == e) {
						this.type_title = item.label
					}
				})
				this.getGoodsList(1)

			},

			change3(e) {
				console.log(e)
				this.status = e

				this.options3.forEach(item => {
					if (item.value == e) {
						this.status_title = item.label
					}
				})
				this.getGoodsList(1)

			},

			next() {
				this.percent = 100
				this.num += 1
				this.duration = 10

				this.$refs.uCountDown.update();


			},

			start() {
				this.$refs.uCountDown.start();
			},
			// 事件触发，每秒一次
			change(timestamp) {
				console.log(timestamp);
				console.log(this.percent);
				this.percent = 10 * timestamp
			},



		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		background-color: #E1EFFF;
		height: 94rpx;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
	
		width: 100%;

		background: #F5F5F5;
	}

	.col-98 {
		color: #989898;
	}

	.top {
		background-color: #FFF;
		height: 80rpx;
		line-height: 80rpx;

		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		border: 2rpx solid rgba(225, 239, 255, 1);

		.calendar {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 10%;

		}

		.calendar image {
			width: 32rpx;
			height: 32rpx;
		}

		.date {
			width: 40%;

		}

		.mid {
			width: 10%;
		}



	}

	.lists {

		.item {
			padding: 20rpx 0 20rpx 20rpx;
			color: #101010;
			font-size: 24rpx;
			height: 200rpx;
			width: 96%;
			margin-left: 2%;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			background-color: #FFF;

			.info {
				display: flex;
				justify-content: space-between;
			}

		}

		.status {
			width: 86rpx;
			height: 86rpx;

			background-image: url('../../../static/images/status-bg1.png');
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			color: #FFF;

		}

		.status-fail {
			width: 86rpx;
			height: 86rpx;

			background-image: url('../../../static/images/status-bg2.png');
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			color: #FFF;

		}

		.label1 {

			font-size: 32rpx;
			height: 46rpx;
			line-height: 46rpx;
		}

		.label {

			height: 40rpx;
			line-height: 40rpx;
		}
	}
</style>